///  description: 基于微信UI的图片/视频选择器(支持拍照及录制视频) 封装wechat_assets_picker、wechat_camera_picker

import 'package:common/image/image_tools.dart';
import 'package:flutter/material.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';

/// description
typedef AssetEntityBlock = void Function(AssetEntity? assetEntity);

class PickerVideoWidget extends StatefulWidget {
  const PickerVideoWidget({
    Key? key,
    this.bgColor = Colors.transparent,
    this.callBack,
  }) : super(key: key);

  final Color bgColor; // 背景色
  final AssetEntityBlock? callBack; // 选择回调

  @override
  State<PickerVideoWidget> createState() => PickerVideoWidgetState();
}

class PickerVideoWidgetState extends State<PickerVideoWidget> {
  AssetEntity? selectedAsset;

  static GlobalKey tabKey = GlobalKey();

  ///获取state供外部使用
  static PickerVideoWidgetState? currentInstance() {
    var state = PickerVideoWidgetState.tabKey.currentContext?.findAncestorStateOfType<PickerVideoWidgetState>();
    return state;
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      key: tabKey,
      children: [
        Container(
            alignment: Alignment.centerLeft,
            width: 100,
            height: 100,
            color: Colors.white,
            child: selectedAsset != null ? _itemWidget(selectedAsset!) : _addBtnWidget()),
      ],
    );
  }

  // 添加按钮
  Widget _addBtnWidget() {
    return GestureDetector(
      child: Container(
        // decoration: const BoxDecoration(color: Color(0xFFF4F6F6), borderRadius: BorderRadius.all(Radius.circular(6))),
        padding: const EdgeInsets.all(10.0),
        child: const Image(image: AssetImage('assets/app/images/world/post_publish_add.png')),
      ),
      onTap: () => showBottomSheet(),
    );
  }

  // 图片和删除按钮
  Widget _itemWidget(AssetEntity assetEntity) {
    return Container(
      color: Colors.transparent,
      child: Stack(
        alignment: Alignment.topRight,
        children: <Widget>[
          GestureDetector(
            onTap: () => _clickAsset(0),
            child: ConstrainedBox(
              constraints: const BoxConstraints.expand(),
              child: Container(child: _loadAsset(assetEntity)),
            ),
          ),
          GestureDetector(
            child: Container(
                padding: const EdgeInsets.all(3),
                // decoration: BoxDecoration(
                //     color: const Color(0xFF151313).withOpacity(0.47),
                //     borderRadius:
                //         const BorderRadius.only(topRight: Radius.circular(6), bottomLeft: Radius.circular(6))),
                child: Image.asset('assets/app/images/world/image_del_icon.png', width: 18)),
            onTap: () => _deleteAsset(0),
          )
        ],
      ),
    );
  }

  Widget _loadAsset(AssetEntity asset) {
    return Container(
        //超出部分，可裁剪
        clipBehavior: Clip.hardEdge,
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(6)),
        child: Image(image: AssetEntityImageProvider(asset), fit: BoxFit.cover));
  }

  void _deleteAsset(index) {
    setState(() {
      selectedAsset = null;
      // 选择回调
      widget.callBack?.call(selectedAsset);
    });
  }

  // 全屏查看
  void _clickAsset(index) {
    AssetPickerViewer.pushToViewer(
      context,
      currentIndex: index,
      previewAssets: [selectedAsset!],
      themeData: AssetPicker.themeData(const Color(0xFF3BB815)),
    );
  }

  // 点击添加按钮
  void showBottomSheet() {
    AssetPickerSheet.showBottomVideoSheet(
      selected: selectedAsset != null ? [selectedAsset!] : [],
      callback: (assetEntity) {
        widget.callBack?.call(assetEntity);
        selectedAsset = assetEntity;
        setState(() {});
      },
    );
  }
}
